<template>
  <div class="login-account">
    <el-form label-width="80px" :rules="rules" :model="account" ref="formRef">
      <el-form-item label="手机号" prop="phone" class="bb">
        <el-input v-model="account.phone" />
      </el-form-item>
      <el-form-item
        :label="isregister ? '密码' : '新密码'"
        prop="password"
        class="bb"
      >
        <el-input v-model="account.password" show-password />
      </el-form-item>
      <el-form-item label="验证码" prop="code" class="bb">
        <el-input v-model="account.code">
          <template #append>
            <el-button type="primary" :disabled="disabled" @click="getSMS">{{
              disabled ? time : '发送验证码'
            }}</el-button>
          </template>
        </el-input>
      </el-form-item>
      <p class="forget cp" @click="changeTab(true)">去登录</p>
      <el-button type="primary" class="login-btn" @click="handleLoginClick"
        >提交</el-button
      >
    </el-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from 'vue'
import { ElForm } from 'element-plus'
import { rules } from '../config/account-config'
import localCache from '@/utils/cache'
import mycore from '@/utils/my-core'
import { GetSMS, ResetPassword } from '@/service/api/login'
import { ElMessage } from 'element-plus'
export default defineComponent({
  name: 'password-reset',
  props: {
    modelValue: {
      type: Boolean,
      default: true
    },
    isregister: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    open2() {
      ElMessage('this is a message.')
    }
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    // 定义属性
    let isKeepPassword = ref(props.modelValue)
    let disabled = ref(false)
    let time = ref(59)
    const account = reactive({
      phone: localCache.getCache('phone') ?? '',
      password: localCache.getCache('password') ?? '',
      code: ''
    })
    const formRef = ref<InstanceType<typeof ElForm>>()
    /**
     * 切换重置/登录框
     */
    const changeTab = (flag: boolean) => {
      emit('update:modelValue', flag)
    }
    /**
     * 获取验证码
     */
    const getSMS = async () => {
      let phone = mycore.trim(account.phone)

      disabled.value = true

      let res = await GetSMS({
        phone
      })
      if (res.code == 200) {
        ElMessage({
          message: '发送成功！',
          type: 'success'
        })
      } else {
        ElMessage({
          message: '发送失败！',
          type: 'error'
        })
      }
      let timeOUt = setInterval(() => {
        time.value--
        if (time.value == 0) {
          clearInterval(timeOUt)
          time.value = 59
          disabled.value = false
        }
      }, 1000)
    }
    const handleLoginClick = () => {
      formRef.value?.validate((valid) => {
        if (valid) {
          ResetPassword({ ...account }).then((res) => {
            if (res.code == 200) {
              ElMessage({
                message: '重置成功!',
                type: 'success'
              })
              localCache.deleteCache('password')
              changeTab(true)
            }
          })
        }
      })
    }
    return {
      rules,
      account,
      isKeepPassword,
      disabled,
      time,
      formRef,
      changeTab,
      getSMS,
      handleLoginClick
    }
  }
})
</script>
<style lang="less" scoped>
.login-account {
  width: 518px;
  margin: 0 auto;
  .bb {
    border-bottom: 2px solid #a2c9f9;
  }
  img {
    width: 143px;
    height: 40px;
  }
  .forget {
    text-align: right;
    text-decoration: underline;
    color: #5198fe;
  }
  .login-btn {
    width: 70%;
    margin-top: 40px;
  }
  .footer-tools {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
:deep(.el-input__inner) {
  border: none;
  background-color: #fafcff;
}
:deep(.el-input-group__append) {
  padding: 0;
  background-color: #fafcff;
  border: none;
}
:deep(.el-form-item__label) {
  text-align: left;
}
</style>
